<script setup>
defineOptions({ name: 'addressList' })

import { orderPreview } from '@/api/order.js'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

onMounted(async () => {
  const { address } = await orderPreview()
  addressList.value = address
})

const addressList = ref([])
</script>

<template>
  <div
    class="d-flex my-4 justify-content-between px-3 align-items-center"
    v-for="item in addressList"
    :key="item.id"
  >
    <div>
      <span> {{ item.name }} </span>
      <span> {{ item.phone }} </span>
      <span v-if="item.is_default" class="mx-2 badge badge-danger">默认</span>
      <p>
        {{ `${item.province}  ${item.city}  ${item.county}  ${item.address}` }}
      </p>
    </div>
    <div>
      <van-icon
        @click="router.push(`/addEdit/${item.id}`)"
        size="20"
        color="gray"
        name="edit"
      />
    </div>
  </div>

  <div class="fixed-bottom d-flex">
    <van-button type="warning" block @click="router.push('/addEdit')"
      >新增地址</van-button
    >
  </div>
</template>
